<template>
	<view class="store_merchant">
		<view class="close" @click="$emit('close')">
			<image :src="`${baseImageUrl}/common/close1.png`"></image>
		</view>
		<view class="header">
			<view class="welcome">欢迎来到商行兑换大厅</view>
			<view class="desc">
				在这里您可以将您的粮食/镖旗/房契/乐谱/布匹兑换成官银。
			</view>
		</view>
		<view class="title">
			<view>商品兑换</view>
		</view>
		<view class="list">
			<view class="item">
				<text class="key">产物</text>
				<view class="value" @click="sheet_show=true">
					<view>{{text}}</view>
					<image :src="`${baseImageUrl}/common/sx.png`"></image>
				</view>
			</view>
			<view class="item" @click="show=true">
				<text class="key">数量</text>
				<view class="value">
					<view v-if="number.length">{{number}}</view>
					<view v-else>请输入兑换数量</view>
				</view>
			</view>
			<view class="number">
				<text>可兑换数量：{{balance}}</text>
			</view>
			<view class="item">
				<text class="key">官银</text>
				<view class="value">
					<view>{{result}}</view>
					<image :src="`${baseImageUrl}/common/gy.png`"></image>
				</view>
			</view>
		</view>
		<view class="btn">
			<view @click="submit">立即兑换</view>
		</view>

		<u-action-sheet :actions="list" round="12" closeOnClickOverlay cancelText="取消" :show="sheet_show"
			@select="select" @close="sheet_show=false"></u-action-sheet>

		<u-keyboard ref="uKeyboard" mode="number" :dotDisabled="true" @change="valChange" @backspace="backspace"
			:show="show" @close="show=false" @confirm="show=false"></u-keyboard>
	</view>
</template>

<script>
	import {
		productExchangeGet
	} from '@/request/api.js';
	export default {
		data() {
			return {
				key: null,
				text: "请选择需要兑换的产物",
				balance: 0.00,
				rato: null,
				number: "",
				result: "预计兑换官银",


				show: false,

				list: [],
				sheet_show: false
			}
		},
		async created() {
			let {
				user_balance_field
			} = await productExchangeGet();
			// let list=
			user_balance_field.forEach(item => {
				item.name = item.title;
			});
			this.list = user_balance_field;
		},
		methods: {
			diff_fn() {
				if (this.number > 0 && this.rato) {
					this.result = Number(this.number) * Number(this.rato)
				}
			},
			valChange(val) {
				this.number += val;
				this.diff_fn();
			},
			backspace() {
				if (this.number.length) this.number = this.number.substr(0, this.number.length - 1);
				this.diff_fn();
			},
			select(item) {
				this.key = item.key;
				this.text = item.name;
				this.balance = item.balance;
				this.rato = item.rato;
				this.diff_fn();
			},
			async submit() {
				// purchaseExchange
				this.$emit("confirm", {
					exchage: this.key,
					number: this.number
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.store_merchant {
		width: 750rpx;
		height: 870rpx;
		padding-top: 100rpx;
		box-sizing: border-box;
		background: url(#{$baseImageUrl}/bg/750_870.png) no-repeat;
		background-size: 100% 100%;
		position: relative;

		.close {
			width: 122rpx;
			height: 122rpx;
			position: absolute;
			right: 40rpx;
			top: -20rpx;
			z-index: 2;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.header {
			margin-bottom: 70rpx;
			padding-right: 67rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			.welcome {
				width: 380rpx;
				height: 42rpx;
				line-height: 42rpx;
				text-align: center;
				color: #494338;
				font-size: 30rpx;
				font-weight: 400;
				font-family: SimSun;
				background: url(#{$baseImageUrl}/bg/title2.png) no-repeat;
				background-size: 100% 100%;
			}

			.desc {
				width: 358rpx;
				line-height: 30rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				font-weight: 400;
				font-family: SimSun;
				margin-top: 15rpx;
			}
		}

		.title {
			display: flex;
			justify-content: center;
			align-items: center;

			view {
				width: 256rpx;
				height: 30rpx;
				line-height: 30rpx;
				text-align: center;
				color: #494338;
				font-size: 42rpx;
				font-weight: 400;
				font-family: LiSu;
				background: url(#{$baseImageUrl}/home/title.png) no-repeat;
				background-size: 100% 100%;
			}
		}

		.list {
			padding: 0 105rpx;
			box-sizing: border-box;

			.number {
				margin-top: 12rpx;
				display: flex;
				justify-content: flex-end;

				text {
					color: #494338;
					font-size: 24rpx;
					font-weight: 400;
					font-family: SimSun;
				}
			}

			.item {
				height: 80rpx;
				margin-top: 30rpx;
				display: flex;
				align-items: center;

				&:first-child {
					margin-top: 50rpx;
				}

				.key {
					color: #494338;
					font-size: 28rpx;
					font-weight: 400;
					font-family: SimSun;
					padding-right: 30rpx;
					box-sizing: border-box;
				}

				.value {
					flex: 1;
					height: 80rpx;
					border-radius: 10rpx;
					padding: 0 108rpx 0 48rpx;
					box-sizing: border-box;
					background: #C0B5B6;
					box-shadow: 2px -1px 10px 0px rgba(3, 0, 0, 0.2);
					position: relative;

					view {
						width: 100%;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						color: rgba(73, 67, 56, 0.5);
						font-size: 28rpx;
						font-weight: 400;
						font-family: SimSun;
					}

					image {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						right: 20rpx;
						top: 20rpx;
					}
				}
			}
		}

		.btn {
			margin-top: 50rpx;
			display: flex;
			justify-content: center;

			view {
				width: 204rpx;
				height: 74rpx;
				line-height: 74rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 30rpx;
				font-weight: 400;
				font-family: SimSun;
				background: url(#{$baseImageUrl}/common/btn.png) no-repeat;
				background-size: 100% 100%;
			}
		}
	}
</style>